<template>
  <div class="eva">
    <div class="topbar" :class="getDetail(detail.status)">
      <div class="t-left">
        <i class="iconfont icon-ai53" v-if="detail.status === 0"></i>
        <i
          class="iconfont icon-guanyu"
          v-else-if="
            detail.status === 5 || detail.status === 6 || detail.status === 8
          "
        ></i>
        <i class="iconfont icon-chahao" v-else></i>
      </div>
      <div class="t-mid">
        <div class="t-m-title">{{ detail.words }}</div>
        <div class="t-m-text">
          运行时间：{{ detail.time || "--" }}ms&emsp; 运行内存：{{
            getmemory(detail.memory, 0) || "--"
          }}&emsp; 代码长度：{{ detail.length || "--" }}B&emsp; 语言：{{
            detail.language || "--"
          }}&emsp; 判题源：{{ detail.judger || "--" }}
          <div class="right-text">
            作者：{{ detail.username || "--" }} &emsp;提交时间：{{
              detail.submitTime || "--"
            }}
          </div>
        </div>
      </div>
    </div>

    <div class="errorMessage" v-show="detail.errorMessage != null">
      <div class="errorMessage-title" :class="getTitleClass(detail.status)">
        错误信息：
      </div>
      <div class="errorMessage-contain">
        {{ detail.errorMessage }}
      </div>
    </div>

    <div
      class="boxes"
      v-show="evaluationList != null && evaluationList.length > 0"
    >
      <div class="b-title" :class="getTitleClass(detail.status)">
        测试点详情
      </div>
      <div class="b-items">
        <div
          class="item"
          v-for="(item, index) in evaluationList"
          :key="item.id"
          :class="{
            green: item.status === 0,
            red:
              item.status === -1 ||
              (item.status > 1 && item.status != 8 && item.status != 6),
            orange: item.status === 8,
          }"
        >
          <div class="index">test:#{{ index + 1 }}</div>
          <div class="title">{{ statusToWord2(item.status) }}</div>
          <div class="time">
            {{ item.time }}ms/{{ getmemory(item.memory, 0) }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="code"
      :class="getCodeClass(detail.status)"
      v-show="detail.code != null"
    >
      <div class="left">
        <codeMirrorTreeCM
          class="codeMirror"
          :type="detail.problemType"
          :language="detail.language"
          :value="detail"
          :onlyRead="true"
        ></codeMirrorTreeCM>
      </div>
      <div class="right">
        <n-button
          class="btn"
          size="small"
          type="info"
          strong
          secondary
          @click="copy(detail.code)"
        >
          <i class="iconfont icon-fuzhi"></i>
          Copy
        </n-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getJudgeDetailAPI, getJudgeDetailListAPI } from "@/api/ojAPI/ojAPI";
import { statusToWords, statusToWords2 } from "@/utils/global.js";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
import "codemirror/theme/idea.css";
import "codemirror/theme/material-darker.css";
import "codemirror/mode/clike/clike.js";
import useClipboard from "vue-clipboard3";
import { ElMessage } from "element-plus";
import codeMirrorTreeCM from "@/pages/ojPage/quiz/components/codeMirrorTreeCM.vue";
export default {
  data() {
    return {
      evaluationDtailList: [],
      evaluationList: [],
      detail: {
        submitId: "",
        pid: "",
        displayPid: "",
        uid: "",
        username: "",
        submitTime: "",
        status: null,
        share: null,
        errorMessage: null,
        time: 0,
        memory: 0,
        score: 0,
        length: 0,
        code: null,
        gid: "",
        language: "",
        judger: "",
        ip: null,
        createTime: "",
        updateTime: "",
      },
      cmOptions: {
        tabSize: 4, // tab的空格个数
        theme: "idea", //主题样式
        lineNumbers: true, //是否显示行数
        lineWrapping: true, //是否自动换行
        // viewportMargin :30,
        matchBrackets: true, //括号匹配
        mode: "text/x-java", //实现javascript代码高亮
        readOnly: true, //只读
      },
    };
  },
  mounted() {
    this.getJudgeDetail(this.$route.params.submitId);
    this.getJudgeDetailList(this.$route.params.submitId);
  },
  methods: {
    async getJudgeDetail(id) {
      await getJudgeDetailAPI(id)
        .then((res) => {
          if (res.data.code === 200) {
            this.evaluationDtailList.push(res.data.data);
            this.detail = res.data.data;
            this.detail.words = statusToWords(this.detail.status);
            this.detail.code = JSON.parse(res.data.data.code);
            this.detail.format = JSON.parse(res.data.data.format);
            console.log(this.detail);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getJudgeDetailList(id) {
      await getJudgeDetailListAPI(id)
        .then((res) => {
          if (res.data.code === 200) {
            this.evaluationList = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmemory(val, index) {
      if (!val) {
        return "";
      }
      const arr = ["KB", "MB", "GB"];
      if (val < 1024) {
        return val + arr[index];
      }
      index += 1;
      val = Number((val / 1024).toFixed(2));
      return this.getmemory(val, index);
    },
    statusToWord2(status) {
      return statusToWords2(status);
    },
    getDetail(status) {
      if (status == 0 || status == 12) {
        return "greenbar";
      } else if (status == 1) {
        return "bluebar";
      } else if (status == 5) {
        return "greybar";
      } else if (status == 8 || status == 6) {
        return "orangebar";
      }
      return "redbar";
    },
    getCodeClass(status) {
      if (status === 0) {
        return "greenCode";
      } else if (status === 8 || status === 6) {
        return "orangeCode";
      } else if (status === 5) {
        return "greyCode";
      } else if (status === 1) {
        return "blueCode";
      }
      return "redCode";
    },
    getTitleClass(status) {
      if (status == 0) {
        return "b-title-green";
      } else if (status == 8 || status == 6) {
        return "b-title-orange";
      } else if (status == 5) {
        return "b-title-grey";
      } else if (status == 1) {
        return "b-title-blue";
      }
      return "b-title-red";
    },
    async copy(msg) {
      const { toClipboard } = useClipboard();
      try {
        // 复制
        await toClipboard(msg);
        ElMessage.success("复制成功");
        // 复制成功
      } catch (e) {
        // 复制失败
        console.log(e);
        ElMessage.error("浏览器不支持自动复制");
      }
    },
  },
  components: {
    Codemirror,
    codeMirrorTreeCM,
  },
  watch: {
    "detail.language": {
      handler(oldV, newV) {
        if (newV === "Java") {
          this.cmOptions.mode = "text/x-java";
        } else if (newV === "C" || newV === "C With O2") {
          this.cmOptions.mode = "text/x-csrc";
        } else if (newV === "C++" || newV === "C++ With O2") {
          this.cmOptions.mode = "text/x-c++src";
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.eva {
  .topbar {
    width: 95%;
    min-height: 17vh;
    margin: 0 auto 2vh auto;
    border-radius: 1vw;
    box-shadow: 0.2vw 0.2vw 0.8vw #e6e6e6, -0.2vw -0.2vw 0.8vw #ffffff;
    display: flex;
    color: #ffffff;

    .t-left {
      width: 5%;
      display: flex;

      .iconfont {
        font-size: 3.3vw;
        margin: auto 0 auto 0.8vw;
      }
    }

    .t-mid {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 93%;

      .t-m-title {
        font-size: 1.8vw;
        font-weight: 600;
      }

      .systemerror {
        word-spacing: 0.1vw;
      }

      .t-m-text {
        .right-text {
          text-align: right;
        }
      }
    }
  }

  .errorMessage {
    width: 95%;
    margin: 0 auto;
    border-radius: 0.8vw;
    padding: 0 0 1vh 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .errorMessage-title {
      width: 100%;
      font-size: 1.3vw;
      font-weight: 550;
      border-bottom: 2px solid;
      padding-left: 1vw;
    }

    .errorMessage-contain {
      white-space: pre-wrap;
      width: 95%;
      overflow: hidden;
      margin: 2vh auto 2vh 2vw;
      font-size: 1vw;
      padding: 0.8vw;
      border-radius: 1vw;
      background-color: rgb(242, 243, 245);
    }
  }

  .boxes {
    width: 90%;
    margin: 1.3vw auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px 0;

    .b-title {
      width: 100%;
      font-size: 1.3vw;
      font-weight: 550;
      border-bottom: 2px solid;
      padding-left: 1.3vw;
    }

    .b-items {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 1.3vw;

      .item {
        width: 160px;
        height: 110px;
        border-radius: 5px;
        overflow: hidden;
        color: rgba(132, 187, 255);
        padding: 8px;
        margin: 5px 10px;

        .title {
          text-align: center;
          font-size: 1.3vw;
          font-weight: 600;
        }

        .time {
          text-align: center;
        }
      }

      .red {
        // background-color: rgba(210, 58, 12, 0.2);
        border: 0.2vw solid red;
        border-left: 0.5vw solid red;
        color: red;
      }

      .green {
        border: 0.2vw solid rgb(69, 189, 104);
        border-left: 0.5vw solid rgb(69, 189, 104);
        color: rgb(69, 189, 104);
      }

      .orange {
        border: 0.2vw solid orange;
        border-left: 0.5vw solid orange;
        color: orange;
      }

      .blue {
        border: 0.2vw solid rgb(69, 140, 241);
        border-left: 0.5vw solid rgb(69, 140, 241);
        color: rgb(69, 140, 241);
      }
    }
  }

  .code {
    width: 95%;
    margin: 3vh auto;
    background-color: #fff;
    display: flex;
    border-radius: 0.5vw;

    .left {
      width: 100%;
      height: 80vh;
    }

    .right {
      position: static;

      .btn {
        position: absolute;
        transform: translate(-100%, 5%);
      }
    }
  }

  .orangeCode {
    border-left: 0.5vw solid rgb(238, 154, 0);
  }

  .redCode {
    border-left: 0.5vw solid rgb(226, 66, 21);
  }

  .greenCode {
    border-left: 0.5vw solid rgb(69, 189, 104);
  }

  .blueCode {
    border-left: 0.5vw solid rgb(85, 158, 255);
  }

  .greyCode {
    border-left: 0.5vw solid grey;
  }
}

.redbar {
  background-color: rgb(216, 68, 22);
}

.greenbar {
  background-color: rgb(69, 189, 104);
}

.orangebar {
  background-color: rgb(246, 154, 0);
}

.bluebar {
  background-color: rgb(69, 140, 241);
}

.greybar {
  background-color: rgb(144, 147, 153);
}

.b-title-red {
  color: rgb(206, 70, 22);
  border-image: linear-gradient(
      -90deg,
      rgba(0, 216, 247, 0) 0%,
      rgb(206, 70, 22) 100%
    )
    2 2 2 2;
}

.b-title-orange {
  color: orange;
  border-image: linear-gradient(-90deg, rgba(0, 216, 247, 0) 0%, orange 100%) 2
    2 2 2;
}

.b-title-green {
  color: rgb(69, 189, 104);
  border-image: linear-gradient(
      -90deg,
      rgba(0, 216, 247, 0) 0%,
      rgb(69, 189, 104) 100%
    )
    2 2 2 2;
}

.b-title-blue {
  color: #00afed;
  border-image: linear-gradient(-90deg, rgba(0, 216, 247, 0) 0%, #00afed 100%) 2
    2 2 2;
}

.b-title-grey {
  color: grey;
  border-image: linear-gradient(-90deg, rgba(0, 216, 247, 0) 0%, grey 100%) 2 2
    2 2;
}
</style>
